<template>
  <div class="attendance" ref="attendance">
    <Row :style="{height:'100%'}">
      <Col span="4" :style="{height:'100%'}">
        <div class="left_tree">
          <h2>选择线路:</h2>
          <Tree :data="treeData" empty-text @on-select-change="selectTree"></Tree>
        </div>
      </Col>
      <Col span="20" :style="{height:'100%'}">
        <div class="content-top">
          <Button type="primary" ghost @click="addClass" v-show="!curLine" disabled>新增班次</Button>
          <Button type="primary" ghost @click="addClass" v-show="curLine">新增班次</Button>
        </div>
        <div class="content">
          <Table border :columns="columns1" :data="shiftList" :loading="shiftLoading"></Table>
        </div>
        <div class="footer">
          <span class="total_page">共条{{shiftList.length}}数据结果</span>
        </div>
      </Col>
    </Row>
    <!-- 添加班次 -->
    <AddClass  @refresh = "getList"/>
   <!-- 编辑班次 -->
    <EditClass @refresh = "getList" ref="editClass"/>
    <!-- 选择车辆 -->
    <!-- <ChooseCar/> -->
    
  </div>
</template>

<script>
import commonService from "../../utils/services/commonService";
import util from "../../utils/util";
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import moment from "moment";
import AddClass from "./components/addClass"; //班次添加
import EditClass from "./components/editClass"; //班次添加
export default {
  data() {
    return {
      treeData: [],
      a: 10,
      columns1: [
        {
          title: "序号",
          key: "name",
          render: (h, r) => {
            return h("span", r.index + 1);
          }
        },
        {
          title: "班次名称",
          key: "shiftName"
        },
        {
          title: "班次类型",
          key: "shiftType"
        },
        {
          title: "车辆",
          key: "busId"
        },
        {
          title: "驾驶员",
          key: "driverName"
        },
        {
          title: "乘务员",
          key: "stewardName"
        },
        {
          title: "车次数",
          key: "tripCount"
        },
        {
          title: "计划上班",
          key: "timeStart"
        },
        {
          title: "计划下班",
          key: "timeEnd"
        },
        {
          title: "实际上班（驾）",
          key: "driverStart"
        },
        {
          title: "实际下班（驾）",
          key: "driverEnd"
        },
        {
          title: "实际上班（乘）",
          key: "stewardStart"
        },
        {
          title: "实际下班（乘）",
          key: "stewardEnd"
        },
        {
          title: "操作",
          key: "address",
          render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px' 
                                    },
                                    on: {
                                        click: () => {
                                            this.editClass(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '复制')
                            ]);
                        }
 
        }
      ],
      data1: []
    };
  },
  beforeMount() {
    ///获取组织树
    commonService.getTreeList().then(data => {
      this.treeData = util.transformTree(data.data);
    });
  },
  mounted() {
  },
  methods: {
    selectTree: function(val) {
      var item = val[0];
      if (item && item.type === 4) {
        var param = {
          lineId: item.id,
          runDate: moment().format("YYYY-MM-DD")
        };
        //设置当前选中id
        this.$store.dispatch("attendance/setItem_act", {key:'curLine',value:item.id});
        this.$store.dispatch("attendance/setItem_act", {key:'teamIds',value:[item.parentId]});
        this.getList(param);
      }
      return false;
    },
    //添加班次
    addClass: function(e) {
      this.$store.dispatch("attendance/setItem_act", { key: "isShowAdd",value: true});
    },
    //编辑班次
    editClass:function(item){
      this.$store.dispatch("attendance/setItem_act", {key: "isShowEdit",value: true});
      this.$store.dispatch("attendance/setItem_act", {key: "curSelClass",value: item});
      this.$refs.editClass.setdata();//设置初始值
    },
    getList: function(param) {
      //获取班次列表
      this.$store.dispatch("attendance/setShiftList_act", param);
    }
  },
  //计算属性
  computed: {
    ...mapState({
      //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      shiftList: state => state.attendance.shiftList, //注意这些与上面的区别就是state.footerStatus,
      shiftLoading:state => state.attendance.shiftLoading,
      curLine:state => state.attendance.curLine
      //里面定义的showFooter是指footerStatus.js里state的showFooter
      //你也可以用下面的mapGetters来获取isShow的值，貌似下面的更简洁
      /*...mapGetters('footerStatus',{ //footerStatus指的是modules文件夹下的footerStatus.js模块
         isShow:'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，
                         //第二个isShow是对应的footerStatus.js里的getters里的isShow
      })*/
    })
  },
  components: {
    AddClass: AddClass,
    EditClass:EditClass,
    // ChooseCar: ChooseCar,
    // ChooseMan: ChooseMan
  }
};
</script>

<style scoped lang="less">
.attendance {
  height: 100%;
  overflow: hidden;
  .left_tree {
    padding: 20px;
    height: 100%;
    overflow: scroll;
    h2 {
      padding-bottom: 20px;
    }
  }
  .content {
    padding: 0 20px 0 20px;
  }
  .content-top {
    height: 70px;
    padding: 20px;
  }
  .footer {
    padding: 20px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
  }
}
</style>